<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alatka-rule-admin</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.min.css}"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-table/dist/bootstrap-table.min.css}"/>
</head>
<body>
<div class="container mt-4">
    <div class="card mb-3">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0">规则外部数据源查询</h5>
            <button class="btn btn-sm btn-outline-secondary"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#cardCollapse"
                    aria-expanded="true"
                    aria-controls="cardCollapse">
                <i class="bi bi-arrows-angle-contract"></i>
            </button>
        </div>
        <div class="card-body collapse show" id="cardCollapse">
            <form id="searchForm" class="row g-3">
                <div class="col-md-3">
                    <label for="key" class="form-label">关键字</label>
                    <input type="text" class="form-control" id="key" name="key" placeholder="输入关键字">
                </div>
                <div class="col-md-3">
                    <label for="name" class="form-label">名称</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="输入名称">
                </div>
                <div class="col-md-3">
                    <label for="type" class="form-label">类型</label>
                    <select class="form-select alk-select-type" id="type" name="type">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="scope" class="form-label">数据范围</label>
                    <select class="form-select alk-select-scope" id="scope" name="scope">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="groupKey" class="form-label">规则组名称</label>
                    <select class="form-select alk-select-groupKey" id="groupKey" name="groupKey">
                        <option value="default_">默认组</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="enabled" class="form-label">是否可用</label>
                    <select class="form-select" id="enabled" name="enabled">
                        <option value="">全部</option>
                        <option value="true" selected>正常</option>
                        <option value="false">禁用</option>
                    </select>
                </div>
                <div class="col-12 text-center">
                    <button type="button" class="btn btn-secondary me-2" id="resetButton">
                        <i class="bi bi-arrow-counterclockwise"></i> 重置
                    </button>
                    <button type="button" class="btn btn-primary" id="searchButton">
                        <i class="bi bi-search"></i> 查询
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="col-12 text-end mb-3">
        <button type="button" class="btn btn-sm btn-outline-info" id="addButton"
                onclick="showEditModalWithExtendedProperties('/rule/datasource/create', true)">
            <i class="bi bi-plus-lg"></i> 新增
        </button>
        <button type="button" class="btn btn-sm btn-outline-warning" id="editButton"
                onclick="showEditModalWithExtendedProperties('/rule/datasource/update', false)">
            <i class="bi bi-pencil-square"></i> 更新
        </button>
        <button type="button" class="btn btn-sm btn-danger" id="deleteButton"
                onclick="showDeleteModal('/rule/datasource/delete')">
            <i class="bi bi-trash"></i> 删除
        </button>
    </div>

    <table id="dataTable"
           data-toggle="table"
           data-method="get"
           data-url="/rule/datasource/page"
           data-sort-name="id"
           data-sort-order="desc"
           data-striped="true"
           data-pagination="true"
           data-detail-view="true"
           data-detail-formatter="detailFormatter"
           data-pagination-loop="false"
           data-side-pagination="server"
           data-click-to-select="true"
           data-maintain-selected="true">
        <thead>
        <tr>
            <th data-radio="true"></th>
            <th data-field="id">ID</th>
            <th data-field="key" data-sortable="true">关键字</th>
            <th data-field="name" data-sortable="true">名称</th>
            <th data-field="type">类型</th>
            <th data-field="scope">数据范围</th>
            <th data-field="groupKey" data-formatter="groupKeyFormatter">规则组名称</th>
            <th data-field="enabled" data-formatter="enabledFormatter">是否可用</th>
        </tr>
        </thead>
    </table>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑规则外部数据源</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editId" name="id">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="editKey" class="form-label">关键字</label>
                            <input type="text" class="form-control" id="editKey" name="key" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="editName" class="form-label">名称</label>
                            <input type="text" class="form-control" id="editName" name="name" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="editType" class="form-label">类型</label>
                            <select class="form-select alk-select-type" id="editType" name="type" required>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="editScope" class="form-label">数据范围</label>
                            <select class="form-select alk-select-scope" id="editScope" name="scope" required>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="editGroupKey" class="form-label">规则组名称</label>
                            <select class="form-select alk-select-groupKey" id="editGroupKey" name="groupKey" required>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="editEnabled" class="form-label">是否可用</label>
                            <select class="form-select" id="editEnabled" name="enabled" required>
                                <option value="true" selected>正常</option>
                                <option value="false">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label d-flex justify-content-between align-items-center">
                            扩展属性
                            <button type="button" class="btn btn-sm btn-success" id="addExtendedBtn">
                                <i class="bi bi-plus"></i> 添加
                            </button>
                        </label>
                        <div id="extendedPropertiesContainer">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveEditBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除规则外部数据源</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除选中的记录？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="saveDeleteBtn">确认</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script th:src="@{/webjars/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/js/table.js}"></script>
<script>
    initRuleGroupSelect();
    initTypeSelect();
    initScopeSelect();
    initTable();
    initExtendedProperties();

    function initScopeSelect() {
        httpClient('/rule/datasource/scope', 'GET', null, function (data) {
            data.forEach((value) => {
                $('.alk-select-scope').append($('<option>', {value: value, text: value}));
            });
        });
    }

    function initTypeSelect() {
        httpClient('/rule/datasource/type', 'GET', null, function (data) {
            data.forEach((value) => {
                $('.alk-select-type').append($('<option>', {value: value, text: value}));
            });
        });
    }

</script>
</body>
</html>